<template>
  <view class="table">
    <scroll-view scroll-x>
      <view class="tr head">
        <text v-for="c in columns" :key="c.key" :style="{width:c.width+'rpx'}">{{ c.label }}</text>
      </view>
      <view v-if="data.length===0" class="empty">未找到匹配数据</view>
      <view v-else class="tr" v-for="(r,i) in data" :key="i">
        <text v-for="c in columns" :key="c.key" :style="{width:c.width+'rpx'}">
          <slot :name="c.key" :row="r">{{ r[c.key] }}</slot>
        </text>
      </view>
    </scroll-view>
    <view class="page">
      <button @click="prev" :disabled="page===1">上一页</button>
      <text>{{ page }} / {{ maxPage }}</text>
      <button @click="next" :disabled="page===maxPage">下一页</button>
    </view>
  </view>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({ columns:Array, data:Array, total:Number, pageSize:Number })
const emit = defineEmits(['page-change'])
const page = ref(1)
const maxPage = computed(() => Math.ceil(props.total / props.pageSize) || 1)
const prev = () => { if (page.value>1) emit('page-change', --page.value) }
const next = () => { if (page.value<maxPage.value) emit('page-change', ++page.value) }
</script>
<style scoped>
.table{ background:#fff; border-radius:8rpx; overflow:hidden; }
.tr{ display:flex; border-bottom:1rpx solid #eee; }
.head{ background:#f0f0f0; font-weight:bold; }
.tr text{ padding:16rpx; font-size:26rpx; white-space:nowrap; }
.empty{ text-align:center; padding:40rpx; color:#999; }
.page{ display:flex; justify-content:center; align-items:center; padding:20rpx; gap:20rpx; }
</style>